<template>
  <div>
    <div class="top flexBetweenCenter">
      <div>
        <a-button icon="left" class="rigntMargin" @click="leftMonth" />
        <a-month-picker v-model="monthTime" format="YYYY年MM月" class="rigntMargin" />
        <!-- style="background:#1890ff;color:#fff" -->
        <a-button icon="right" class="rigntMargin" @click="rightMonth" />
        <a-button style="font-size:16px" class="rigntMargin">
          <span style="display:inline-block;hight:32px"></span>导出
        </a-button>
      </div>
      <div>
        <a-input-search placeholder="请输入姓名" style="width: 300px" @search="onSearch" />
      </div>
    </div>
    <div class="atable">
      <a-table :data-source="data" :scroll="{ x: 600}">
        <a-table-column key="month" title="月份" data-index="month" width="150px" align="center" />
        <a-table-column key="name" title="姓名" data-index="name" width="150px" align="center">
          <template slot-scope="text">
            <a>{{text}}</a>
          </template>
        </a-table-column>
        <a-table-column key="post" title="岗位" data-index="post" width="150px" align="center" />
        <a-table-column key="days" title="出勤天数" data-index="days" width="120px" align="center" />
        <a-table-column
          :key="index.toString()"
          :data-index="index.toString()"
          v-for="index in 30"
          width="100px"
          align="center"
        >
          <span slot="title" :class="{ restDay: (index%7==0)||(index%7==6) }">{{index}}</span>
          <template slot-scope="text">
            <img :src="kaoqin2" alt v-if="text" />
            <img :src="kaoqin1" alt v-else />
          </template>
        </a-table-column>
      </a-table>
    </div>
     <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="total"
            show-size-changer
            :pinspector-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
              <span v-if="props.value === '40'">全部</span>
            </template>
          </a-pagination>
        </div>
      </div>
  </div>
</template>

<script>
import moment from 'moment'
import kaoqin1 from '@/assets/img/kaoqin11.png'
import kaoqin2 from '@/assets/img/kaoqin2.png'
const data = [
  {
    key: '1',
    month: '2020年3月',
    name: '王志',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '2',
    month: '2020年3月',
    name: '潘海涛',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '3',
    month: '2020年3月',
    name: '王权',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '4',
    month: '2020年3月',
    name: '李海',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '5',
    month: '2020年3月',
    name: '李志同',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  }
]
export default {
  data() {
    return {
      monthTime: moment(new Date(), 'YYYY年MM月'),
      data,
      kaoqin1,
      kaoqin2,
       pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
    }
  },
  mounted() {
    // console.log(this.monthTime)
  },
  methods: {
    moment,
    onSearch(value) {
      console.log(value)
    },
    leftMonth() {
      this.monthTime = moment(this.getLastMonth(this.monthTime._d), 'YYYY年MM月')
    },
    rightMonth() {
      this.monthTime = moment(this.getNextMonth(this.monthTime._d), 'YYYY年MM月')
    },
    getLastMonth(date) {
      //获取上个月日期
      var year = date.getFullYear()
      var month = date.getMonth()
      if (month == 0) {
        year = year - 1
        month = 12
      }
      return year + '年' + month + '月'
    },
    getNextMonth(date) {
      var year = date.getFullYear()
      var month = date.getMonth()+2
      if (month == 13) {
        year = year + 1
        month = 1
      }
      return year + '年' + month + '月'
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      // this.current = 1
      // this.pageSize = pageSize
      // this.getTable()
    },
    pageChange(current, pageSize) {
      // this.current = current
      // this.pageSize = pageSize
      // this.getTable()
    }
  }
}
</script>

<style scoped>
::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
}
::v-deep .ant-calendar-picker-input.ant-input {
  line-height: 1.5;
  background: #1890ff;
  text-align: center;
  color: #fff;
  width: 120px;
  border: 1px solid #1890ff;
  cursor: pointer;
}
.rigntMargin {
  margin-right:20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top:30px ;
  margin-bottom: 30px;
}
.atable{
    margin-bottom: 20px;
}
</style>